← 返回學習記錄主頁

📋 HTML 表格設計與範例

HTML 表格 (`<table>`) 是網頁中呈現結構化數據（如報表、時間表等）的基礎。本篇將重點介紹表格的基本構成，以及如何使用 `colspan`（跨欄）和 `rowspan`（跨列）實現單元格合併。

1. 表格基礎結構

一個基本的 HTML 表格由以下核心標籤組成：

`<table>`: 定義整個表格。
`<tr>`: 定義表格中的**一列**（Table Row）。
`<th>`: 定義表格的**標題單元格**（Table Header，預設粗體居中）。
`<td>`: 定義表格的**標準數據單元格**（Table Data）。
*建議：* 使用 `<thead>` (表頭)、`<tbody>` (表身) 和 `<tfoot>` (表腳) 來組織表格結構。

2. 掌握單元格合併 (Colspan & Rowspan)

在表格設計中，單元格合併是讓複雜數據呈現更清晰的重要技巧。

2.1. 跨欄合併 (`colspan`)

用於讓一個單元格橫向跨越**多個欄位**。屬性值為要跨越的欄數。

<td colspan="2">橫跨兩欄</td>

2.2. 跨列合併 (`rowspan`)

用於讓一個單元格縱向跨越**多個列（行）**。屬性值為要跨越的列數。

<td rowspan="3">縱跨三列</td>

3. 實戰範例：簡單的時間表

以下是一個結合 `colspan` 和 `rowspan` 的範例，模擬一個簡單的學習時間表。

時間	上午		下午
時間	週一	週二	下午
9:00	HTML 學習	專案會議 (9:00-11:00)	CSS 樣式
10:00	CSS Flexbox	專案會議 (9:00-11:00)	響應式設計
午休時間
14:00	自由練習與專題研討

4. 範例程式碼

<table>
  <thead>
    <tr>
      <th rowspan="2">時間</th>
      <th colspan="2">上午</th>
      <th rowspan="2">下午</th>
    </tr>
    <tr>
      <th>週一</th>
      <th>週二</th>
    </tr>
  </thead>
  <tbody>